var mask, mini, zoom, imgCon, prev, left, right, tran,imgs;
function init3() {
  mini = document.getElementById("mini");
  tran=document.querySelector(".tran")
  zoom = document.querySelector("#zoom");
  mask = document.querySelector("#maks");
  left = document.querySelector(".a-left");
  right = document.querySelector(".a-rights");
  imgCon = document.querySelector(".ban-list");
  imgs=imgCon.querySelectorAll(".imgCon");
  mini.addEventListener("mouseenter", mouseHandler);
  
  imgCon.addEventListener("mouseover", imgMouseHandler);
  left.addEventListener("click", bnClickHandler);
  right.addEventListener("click", bnClickHandler);
  changePrev(imgs[0]);
}

function mouseHandler(e) {
  if (e.type === "mouseenter") {
    mini.addEventListener("mousemove", mouseHandler);
    mini.addEventListener("mouseleave", mouseHandler);
    mask.style.display = zoom.style.display = "block";
  } else if (e.type === "mouseleave") {
    mini.removeEventListener("mousemove", mouseHandler);
    mini.removeEventListener("mouseleave", mouseHandler);
    mask.style.display = zoom.style.display = "none";
  } else {
    maskMove(e.clientX, e.clientY);
  }
}
function maskMove(clientX, clientY) {
  var miniRect = mini.getBoundingClientRect();
  var x = clientX - miniRect.x - mask.offsetWidth / 2;
  var y = clientY - miniRect.y - mask.offsetHeight / 2;
  if (x < 0) x = 0;
  if (y < 0) y = 0;
  if (x > miniRect.width - mask.offsetWidth)
    x = miniRect.width - mask.offsetWidth;
  if (y > miniRect.height - mask.offsetHeight)
    y = miniRect.height - mask.offsetHeight;
  mask.style.left = x + "px";
  mask.style.top = y + "px";
  zoom.style.backgroundPositionX = (-x * 520) / 280.75 + "px";
  zoom.style.backgroundPositionY = (-y * 520) / 280.75 + "px";
}
function imgMouseHandler(e) {
  if (e.target.nodeName !== "IMG") return;
  changePrev(e.target);
}
function changePrev(elem) {
  if (prev) {
    prev.parentNode.style.borderColor = "transparent";
  }
  prev = elem;
  prev.parentNode.style.borderColor = "#e53e41";
  zoom.style.background = mini.style.background = `url(${elem.src}) no-repeat`;
  zoom.style.backgroundSize= "970px 965px";
  
}
function bnClickHandler(e) {
  console.log(tran);
  if (this === left) {
    tran.style.left = "0px";
    changePrev(imgs[0]);
  } else if (this === right) {
    tran.style.left = "-490px";
    changePrev(imgs[5]);
  }
}


export default {
  init3,
  bnClickHandler
}